<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueCDN引入组件的方式</title>
    <style>

    </style>
</head>

<body>
    <div id="app"></div>
    <script src="../lib/vue/3/vue.global.js"></script>
    <script>
        const { createApp, h } = Vue;
        const options = {
            data() {
                return {
                    count: 0,
                    list: [],
                    message: ''
                }
            },
            computed: {
                doubled() {
                    return this.count * 2
                }
            },
            watch: {
                count: {
                    immediate: true,
                    handler(n) {
                        console.log('count ->', n)
                    }
                }
            },
            created() {
                this.fetch()
            },
            mounted() {
                // Vue 3 根实例没有 this.$el，可以用 document.getElementById
                this.$nextTick(() => {
                    const el = document.getElementById('app');
                    console.log(el.offsetWidth);
                });
            },
            methods: {
                fetch() { /* 拉数据，填充 list */ },
                inc() {
                    this.count++
                }
            },
            render() {
                return h('div', [
                    h('p', `count=${this.count}, doubled=${this.doubled}`),
                    h('button', { onClick: this.inc }, 'Add'),
                    h('p', this.message)
                ])
            }
        }
        const app = createApp(options);
        const vm = app.mount('#app');
        setTimeout(() => {
            vm.message = 'Hello Vue 3!';
        }, 2000);
        setTimeout(() => {
            vm.message = 'Hello World!';
        }, 4000);

        console.log('app', app);
        console.log('app_instance', app._instance);
        console.log('app_instance.data', app._instance.data);
    </script>
</body>